<!--<template>-->
<!--  <div>-->
<!--    <el-card class="box-card">-->
<!--      <el-row>-->
<!--        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">-->
<!--          <span>用户名:</span>-->
<!--        </div></el-col>-->
<!--        <el-col :span="16"><div class="grid-content bg-purple-light">-->
<!--          <el-input v-model="name" placeholder="用户名"></el-input>-->
<!--        </div></el-col>-->
<!--        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">-->
<!--          *-->
<!--        </div></el-col>-->
<!--      </el-row>-->

<!--      <p/>-->
<!--      <el-row>-->
<!--        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">-->
<!--          <span>用户密码:</span>-->
<!--        </div></el-col>-->
<!--        <el-col :span="16"><div class="grid-content bg-purple-light">-->
<!--          <el-input v-model="pwd" type="password" placeholder="用户密码"></el-input>-->
<!--        </div></el-col>-->
<!--        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">-->
<!--          *-->
<!--        </div></el-col>-->
<!--      </el-row>-->
<!--      <p/>-->
<!--      <el-button type="success" @click="login">登录</el-button>-->
<!--      <el-button type="success" @click="add">注册</el-button>-->
<!--    </el-card>-->

<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "Login"-->
<!--  ,data(){-->
<!--    return{-->
<!--      name:'',-->
<!--      pwd:''-->
<!--    }-->
<!--  },-->
<!--  methods:{-->
<!--    add(){-->
<!--      this.$router.push("AddUser")-->
<!--    }-->
<!--    ,-->
<!--    async login(){-->
<!--      // sessionStorage.getItem("")-->
<!--      // localStorage.setItem("","")-->
<!--      // localStorage.getItem("")-->
<!--      //路由到index.vue-->
<!--      console.log('.......................d')-->
<!--      let info-->
<!--      await  this.$axios.get("/api/login/"+this.name+"/"+this.pwd).then(-->
<!--          r=>{-->
<!--            info = r.data-->
<!--          }-->
<!--      )-->
<!--      if(info != '' ){-->
<!--        sessionStorage.setItem("loginUser",info)-->
<!--        this.$router.push("Index")-->
<!--        return-->
<!--      }-->
<!--      this.$message.error("用户名或密码错误")-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.labClass{-->
<!--  margin-top: 10px;-->
<!--}-->
<!--.box-card{-->
<!--  margin-top: 10%;-->
<!--  margin-left: 30%;-->
<!--  margin-right: 30%;-->
<!--}-->
<!--</style>-->

<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户名:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="name" placeholder="用户名"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5"  class="labClass"><div class="grid-content bg-purple">
          <span>用户密码:</span>
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple-light">
          <el-input v-model="pwd" type="password" placeholder="用户密码"></el-input>
        </div></el-col>
        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
          *
        </div></el-col>
      </el-row>
      <p/>
      <el-button type="success" @click="login">登录</el-button>
      <!--          <el-button type="success" @click="add()">注册</el-button>-->
    </el-card>

  </div>
</template>

<script>
export default {
  name: "Login"
  ,data(){
    return{
      name:'',
      pwd:''
    }
  },
  methods:{

    async login(){

      let param ={
        userName:this.name,userPwd:this.pwd
      }
      let user = ''
      await  this.$axios.get("/api/login/",{params:param}).then(
          r=>{
            user = r.data
          }
      )
      if(user == ''){
        this.$message.error('用户名或密码错误')
        return
      }
      sessionStorage.setItem("loginUser",JSON.stringify(user));
      await this.$router.push("Index")
    }
  }
}
</script>

<style scoped>
.labClass{
  margin-top: 10px;
}
.box-card{
  margin-top: 10%;
  margin-left: 30%;
  margin-right: 30%;
}
</style>